
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      h2 {
        text-align: center;
      }

      .box {
        width: 600px;
        margin: 50px auto;
        display: flex;
        font-size: 25px;
        line-height: 40px;
      }

      .qss {
        width: 450px;
        height: 40px;
        color: red;
      }

      .btns {
        text-align: center;
      }

      .btns button {
        width: 120px;
        height: 35px;
        margin: 0 50px;
      }
    </style>
  </head>

  <body>
    <h2>真心话大冒险</h2>
    <div class="box">
      <span>大冒险：</span>
      <div class="qs">这里显示惩罚@~@</div>
    </div>
    <div class="box">
      <span>真心话：</span>
      <div class="qss">这里显示惩罚@~@</div>
    </div>
    <div class="btns">
      <button class="start">点击选择大冒险</button>
      <button class="end">结束</button>
    </div>
    <br />
    <div class="btns">
      <button class="start1">点击选择真心话</button>
      <button class="end1">结束</button>
    </div>

    <script>
      const arr = [
        "说说童年最有趣的一次经历",
        "曾经有过最被感动的事是什么？",
        "你最希望改掉自己哪些缺点或性格？",
        "现在你最喜欢的人是谁？",
        "你最讨厌什么食物",
        "和异性发生过最暧昧的事情。",
        "你向往的生活状态是什么样的？具体说说。",
        " 如果给你一个机会去世界上任何一个地方旅行你会去、",
        "你在生活中有什么比较特殊的癖好？",
        "对你而言，爱情和友情哪个比较重要？",
        "最想实现的三个愿望是什么？",
        " 第一次爱的人对你有什么影响？",
        "你会选择你爱的人还是爱你的人？",
        "你一般用什么手指来挖鼻孔呢？",
        "你最喜欢的电影是什么？",
        "我在你眼里是什么样？",
        "你认为多交朋友的好处在哪里？",
        "你觉得自己最郁闷的外号是什么？",
        "自己做过最丢脸的事情是什么？",
        "说一个你不敢告诉你爸妈的事。",
        "你最受不了别人对你做什么？",
        "比较喜欢爸爸还是妈妈？",
        "你最喜欢的食物是什么",
        "已经分手的对象来找你和好，你能同意吗?",
        "心情不好的时候做什么?",
        "被人冤枉时，怎么办?",
        "你有没有钟意的人?是谁?",
        "你在乎别人看你的眼光吗？会为了众人的反对放弃自己想要的东西或人吗?",
        "如果有一天，你生命中最重要的东西离你而去了，你会怎么办？",
        "如果一个异性爱上你了，你怎么办?",
        "洗澡洗到一半没水了怎么办?",
        "你觉得最美的画面是什么？",
        "大喊“卖拖鞋啦～2块一双，买一送3”",
        "你今天可以吃冰淇淋吗",
        "第一次爱的人对你有什么影响？",
        "你最喜欢什么样的男生？",
        "说出你撒过的最严重的谎？",
        "厕纸用完你会扔在哪里？",
        "你会做菜么？",
        "谈过几次恋爱？",
        "你喜欢我什么？",
        "哭得最伤心的是哪次？",
        "曾经看了流泪的电影？",
        "如何向喜欢的人表白？",
        "你理想中的工作是什么？",
        "你最喜欢的歌曲是哪首？",
        "你认为真爱是什么样子的？",
        "你眼中的他是什么样的人？",
        "你对另一半的要求有哪些？",
        "你通常用那只指头挖鼻子？",
        "旅行过的地方，最爱哪里",
        "你相信一见钟情么？",
        "你的小癖好是什么？",
        "最短的恋爱谈过多久",
        "如果你爱的人不爱你怎么办？",
        "给微信里任意一个除了亲人的异性发一条“我喜欢你”",
        "认为自己和哪种动物最相近？为什么？",
        "说出3个含有“我们”并且符合实际情况的句子，比如“我们现在都在这个房间里”",
        "跟唱最近循环播放的一首歌",
        "你最受不了别人对你做什么",
        "对微信通讯录里随机一个人发语音大喊：我是猪，我是猪，我真的是猪",
        "对梦中情人有什么要求（在一分钟内说出五条）",
        "描述一次自己的神操作。",
        "你心里面一直惦记着的名字是？",
        "你喜欢安卓手机还是苹果手机？",
        "你能用舌头碰到你的鼻子么？",
        "你最难以释怀的事情是什么？",
        "讲述自己最得意的一件事情？",
        "你不开心的时候喜欢做什么？",
        "你相信爱情么？",
        " 你在众目睽睽之下踩到了大便怎么办？",
        "早上吃什么？中午吃什么？晚上吃什么？",
        "如果发现对面大楼上有狙击手瞄准你，你会怎么做？",
        "如果有一天我对你说我爱上你了，你怎么办？",
        " 你做的最多的白日梦是什么？",
        "你会不会在意ta的过去，为什么?",
        "说下自己的身高体重",
      ];
      const arr1 = [
        "3秒内快速念出“黑化肥发灰会挥发 灰化肥挥发会发黑",
        " 男生模仿绿箭的语气说一句话、姐姐，你生气你男朋友都不哄你的吗？那我来哄你好不好",
        "大冒险做一遍广播体操",
        "发一张你抠脚的照片。",
        "唱一首老鼠爱大米",
        " 大冒险跳绳30下",
        "神情的吻墙1秒？",
        "蹲在凳子上作便秘状？",
        "一口气说一段绕口令",
        "说:乖乖！”",
        "发一张自拍照。",
        "倒着写出《静夜思》逐个发送。",
        "3秒内快速念出“黑化肥发灰会挥发 灰化肥挥发会发黑",
        " 男生模仿绿箭的语气说一句话、姐姐，你生气你男朋友都不哄你的吗？那我来哄你好不好",
        "大冒险做一遍广播体操",
        "发一张你抠脚的照片。",
        "唱一首老鼠爱大米",
        " 大冒险跳绳30下",
        "神情的吻墙1秒？",
        "蹲在凳子上作便秘状？",
        "一口气说一段绕口令",
        "说:乖乖！”",
        "发一张自拍照。",
        "倒着写出《静夜思》逐个发送。",
        "3秒内快速念出“黑化肥发灰会挥发 灰化肥挥发会发黑",
        " 男生模仿绿箭的语气说一句话、姐姐，你生气你男朋友都不哄你的吗？那我来哄你好不好",
        "大冒险做一遍广播体操",
        "发一张你抠脚的照片。",
        "唱一首老鼠爱大米",
        " 大冒险跳绳30下",
        "神情的吻墙1秒？",
        "蹲在凳子上作便秘状？",
        "一口气说一段绕口令",
        "说:乖乖！”",
        "发一张自拍照。",
        "倒着写出《静夜思》逐个发送。",
        "3秒内快速念出“黑化肥发灰会挥发 灰化肥挥发会发黑",
        " 男生模仿绿箭的语气说一句话、姐姐，你生气你男朋友都不哄你的吗？那我来哄你好不好",
        "大冒险做一遍广播体操",
        "发一张你抠脚的照片。",
        "唱一首老鼠爱大米",
        " 大冒险跳绳30下",
        "神情的吻墙1秒？",
        "蹲在凳子上作便秘状？",
        "一口气说一段绕口令",
        "说:乖乖！”",
        "发一张自拍照。",
        "倒着写出《静夜思》逐个发送。",
      ];

      // 获取dom元素
      const qs = document.querySelector(".qss");
      const qs1 = document.querySelector(".qs");

      const start = document.querySelector(".start");
      const end = document.querySelector(".end");

      const start1 = document.querySelector(".start1");
      const end1 = document.querySelector(".end1");

      // 设置全局变量随机数和时间
      let random;
      let random1;
      let id;
      // 开始点击事件
      start.addEventListener("click", function () {
        if (!id) {
          id = setInterval(function () {
            // random = Math.floor(Math.random() * arr.length);
            random1 = Math.floor(Math.random() * arr1.length);
            // qs.innerHTML = arr[random];
            qs1.innerHTML = arr1[random1];

            // console.log(random);
            if (arr1.length === 1) {
              start.disabled = true;
              end.disabled = true;
              clearInterval(id);
            }
          }, 10);
        }
      });
      // 结束点击事件
      end.addEventListener("click", function () {
        clearInterval(id);
        id = "";
        // console.log(arr);
      });

      start1.addEventListener("click", function () {
        if (!id) {
          id = setInterval(function () {
            random = Math.floor(Math.random() * arr.length);
            qs.innerHTML = arr[random];

            // console.log(random);
            if (arr.length === 1) {
              start1.disabled = true;
              end1.disabled = true;
              clearInterval(id);
            }
          }, 10);
        }
      });
      // 结束点击事件
      end1.addEventListener("click", function () {
        clearInterval(id);
        id = "";
        // console.log(arr);
      });
    </script>
  </body>
</html>
